<template>
	<view class="item">
		<!-- width = 300，所有left=300，表示没有背景色，按比例*3 -->
		<view :class="{'item-buy': isbuy,'item-sell': !isbuy}" :style="{left: (scale*3) + 'rpx'}" >
			
		</view>
		<text :class="{'uni-up': isbuy,'uni-down': !isbuy}" class="uni-h5">{{price}}</text>
		<text class="uni-h5 uni-color-gray1">{{volume}}</text>
	</view>
</template>

<script>
export default {
	props: {
		isbuy: {
			type: Boolean,
			default: false
		},
		price: {
			type: String,
			default: ''
		},
		volume: {
			type: String,
			default: ''
		},
		scale: {
			type: String,
			default: "300"
		}
	},
};
</script>

<style lang="scss">
.item {
	flex: 1;
	flex-direction: row;
	padding-top: 4rpx;
	padding-bottom: 4rpx;
	justify-content: space-between;
	align-items: center;
}
.item-sell {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(209,75,100,0.09);
}
.item-buy {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,180,142,0.09);
}
</style>
